<template>
  <div class="w-full h-full flex flex-col">
    <!-- 拖拽区域 - 固定高度 -->
    <div
      class="h-[70%] xl:h-[85%] flex items-center justify-center border-3 border-dashed transition-colors duration-200 scrollbarY"
      :class="isDragOver ? 'border-blue-400 bg-blue-50 border-3' : 'border-transparent bg-white'"
      @dragover.prevent="onDragOver"
      @dragleave="onDragLeave"
      @drop="onDrop"
    >
      <template v-if="showCamera">
        <div class="text-center w-full h-full flex justify-center">
          <img :src="showCamera.pic" class="object-contain h-full" />
        </div>
      </template>
      <template v-else>
        <div class="text-[#909399] mt-20 tracking-widest">请将左侧需要处理的图片拖拽至图像预处理操作面板</div>
      </template>
    </div>

    <!-- 滑动条区域 - 两行布局 -->
    <div v-if="showCamera" class="flex-1 p-6 bg-gray-50">
      <div class="space-y-6">
        <!-- 第一行：k1 和 tangentialH -->
        <div class="flex items-center space-x-8">
          <div class="flex items-center flex-1">
            <span class="w-32 text-sm text-gray-600">调整镜像畸变K1:</span>
            <a-slider
              v-model:value="sliderValues.k1"
              :min="0"
              :max="100"
              :step="1"
              class="flex-1 ml-4"
              @change="onSliderChange('k1')"
            />
            <span class="ml-2 text-sm text-gray-500 w-8">{{ sliderValues.k1 }}</span>
          </div>

          <div class="flex items-center flex-1">
            <span class="w-32 text-sm text-gray-600">调整切向畸变水平:</span>
            <a-slider
              v-model:value="sliderValues.tangentialH"
              :min="0"
              :max="100"
              :step="1"
              class="flex-1 ml-4"
              @change="onSliderChange('tangentialH')"
            />
            <span class="ml-2 text-sm text-gray-500 w-8">{{ sliderValues.tangentialH }}</span>
          </div>
        </div>

        <!-- 第二行：k2 和 tangentialV -->
        <div class="flex items-center space-x-8">
          <div class="flex items-center flex-1">
            <span class="w-32 text-sm text-gray-600">调整镜像畸变K2:</span>
            <a-slider
              v-model:value="sliderValues.k2"
              :min="0"
              :max="100"
              :step="1"
              class="flex-1 ml-4"
              @change="onSliderChange('k2')"
            />
            <span class="ml-2 text-sm text-gray-500 w-8">{{ sliderValues.k2 }}</span>
          </div>

          <div class="flex items-center flex-1">
            <span class="w-32 text-sm text-gray-600">调整切向畸变垂直:</span>
            <a-slider
              v-model:value="sliderValues.tangentialV"
              :min="0"
              :max="100"
              :step="1"
              class="flex-1 ml-4"
              @change="onSliderChange('tangentialV')"
            />
            <span class="ml-2 text-sm text-gray-500 w-8">{{ sliderValues.tangentialV }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const draggedCamera = defineModel('draggedCamera')
const droppedCamera = defineModel('droppedCamera')
const showCamera = defineModel<any>('curCamera')

const isDragOver = ref(false)

// 滑动条值
const sliderValues = reactive({
  k1: 0,
  tangentialH: 0,
  k2: 0,
  tangentialV: 0
})

function onDragOver() {
  isDragOver.value = true
}

function onDragLeave() {
  isDragOver.value = false
}

function onDrop() {
  isDragOver.value = false
  if (draggedCamera.value) {
    showCamera.value = draggedCamera.value
    droppedCamera.value = draggedCamera.value
    // 重置滑动条值
    Object.keys(sliderValues).forEach((key) => {
      sliderValues[key] = 0
    })
  }
}

function onSliderChange(type: string) {
  console.log(`${type} 值变化:`, sliderValues[type])
  // 这里可以添加图片处理逻辑
}
</script>

<style scoped></style>
